<template>
	<view>
		<scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
			<view class="orderList">
				<view class="item" :class="{inactive: !card.active}">
					<view class="card">
						<image class="cardImg" :src="card.cardImg"></image>
						<view class="sjavatar">
							<image :src="card.sjavatar" mode=""></image>
						</view>
						<text class="sjname">{{card.sjname}}</text>
						<text class="cardType">{{card.cardType}}</text>
					</view>
					<view class="extend">
						<view class="image">
							<image src="../../static/imgs/vip/hyk_lb@2x.png" mode=""></image>
						</view>
						<view class="detail">
							<view class="huiyuanxieyi" @click="$refs['hyxypopup'].open()">
								<image src="../../static/imgs/vip/hyk_hyxy@2x.png" mode=""></image><text>会员协议</text>
							</view>
							<view class="item"><view class="key">卡类:</view><view class="value">{{card.cardType}}</view></view>
							<view class="item"><view class="key">总课时:</view><view class="value">{{card.totalLessons}}</view></view>
							<view class="item"><view class="key">剩余课时:</view><view class="value">{{card.leftLessons}}</view></view>
							<view class="item"><view class="key">课程使用:</view><view class="value">{{card.lessonUse}}</view></view>
							<view class="item"><view class="key">有效期:</view><view class="value">{{card.startDate}} 至 {{card.endDate}}</view></view>
						</view>
					</view>
					<view class="youhuiInfo">
						<image src="../../static/imgs/vip/hyk_lw@2x.png" mode=""></image>
						<text>获得{{card.jifen}}积分</text>
						<view class="split"></view>
						<text>优惠{{card.jifen}}元</text>
						<view class="split"></view>
						<text>赠送{{card.jifen}}课时</text>
					</view>
				</view>
				<view class="mdbz">
					<view class="left">
						<image src="../../static/imgs/vip/hyk_bz@2x.png" mode=""></image>
						<text>门店备注</text>
					</view>
					<scroll-view :scroll-top="0" scroll-y="true" class="right">
						<view class="bzItem">
							<view class="icon">
								<image src="../../static/imgs/vip/hyk_bj@2x.png" mode=""></image>
							</view>
							<view class="infos">
								<view class="date">2020-4-15</view>
								<view class="detail">这里是内容</view>
							</view>
						</view><view class="bzItem">
							<view class="icon">
								<image src="../../static/imgs/vip/hyk_bj@2x.png" mode=""></image>
							</view>
							<view class="infos">
								<view class="date">2020-4-15</view>
								<view class="detail">这里是内容</view>
							</view>
						</view><view class="bzItem">
							<view class="icon">
								<image src="../../static/imgs/vip/hyk_bj@2x.png" mode=""></image>
							</view>
							<view class="infos">
								<view class="date">2020-4-15</view>
								<view class="detail">这里是内容</view>
							</view>
						</view><view class="bzItem">
							<view class="icon">
								<image src="../../static/imgs/vip/hyk_bj@2x.png" mode=""></image>
							</view>
							<view class="infos">
								<view class="date">2020-4-15</view>
								<view class="detail">这里是内容</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="bottombtn">
				<button type="default" class="submit-btn" @click="payMycard()">续费</button>
			</view>
		</scroll-view>
		<!-- 会员协议 -->
		<uni-popup ref="hyxypopup" type="center" @change="handlerPopupStatusChenge($event, 'showHyxyPopup')">
				<view id="hyxypopup">
					<view class="title">
						会员协议
					</view>
					<scroll-view class="c" scroll-y="true">
						<text>
							1.内容\n
							2.内容内容内容内容内容内容内容内容内容内容内容\n 
							3.内容内容内容内容内容内容内容内容内容内容内容\n
						</text>
					</scroll-view>
					<view class="bottom">
						<button type="default" @click="$refs['hyxypopup'].close();">同意</button>
					</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var img1 = require('../../static/test/a5.jpg');
	var img2 = require('../../static/test/a4.jpg');
	!img1.startsWith('/') && (img1 = '/' + img1);
	!img2.startsWith('/') && (img2 = '/' + img2);
	export default {
		data() {
			return {
        showHyxyPopup: false,
				card: {cardImg: img1, sjavatar: img2, sjname: '舞邦工作室', cardType: '年卡', active: true,
					totalLessons: '期限卡', 'leftLessons': '26次', lessonUse: '每周三次', startDate: '2020-4-15',
					endDate: '2020-4-23', jifen: 'xxx', youhui: 'xxx', keshi: 'xxx', xieyi: '1.内容\n2.内容内容内容内容内容内容内容内容内容内容内容\n 3.内容内容内容内容内容内容内容内容内容内容内容\n'
				}
			}
    },
    onBackPress() {
			if (this.showHyxyPopup) {
				this.$refs['hyxypopup'].close();
				return true;
			}
		},
		methods: {
      handlerPopupStatusChenge: function(e) {
				this['showHyxyPopup'] = e.show;
      },
      duihuan: function () {
        uni.navigateTo({url: '/pages/vipcard/duihuan'});
      },
      showJfmx: function () {
        uni.navigateTo({url: '/pages/vipcard/jifenDetail'});
      },
			payMycard: function () {
				uni.navigateTo({url: '/pages/vipcard/pay'});
			}
		},
		onLoad() {
		}
	}
</script>

<style lang="scss" scoped>
.scroll-X {
	margin: 0 10pt;
	width: calc(100vw - 20pt);
}
.scroll-Y {
	height: calc(100vh);
	// #ifdef H5
	height: calc(100vh - 44px);
	// #endif
}

.orderList {
	.item {
		position: relative;
		padding: 10pt 15pt;
		.card {
			position: relative;
			width: 100%;
			height: 320rpx;
			.cardImg {
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
			.sjavatar {
				position: absolute;
				top: 10px;
				left: 10px;
				image {
					width: 35px;
					height: 35px;
					border-radius: 50%;
				}
			}
			.sjname {
				color: #fff;
				font-size: 14px;
				position: absolute;
				left: 50px;
				top: 16px;
			}
			.cardType {
				color: #fff;
				font-size: 22px;
				position: absolute;
				top: 40%;
				width: 100%;
				text-align: center;
				left: 0;
			}
		}
		&.inactive::after {
			content: '';
			position: absolute;
			background: url(../../static/imgs/vip/hyk_yyw@2x.png);
			width: 80px;
			height: 80px;
			right: 20px;
			top: 10px;
			background-size: 100%;
		}
	}
	.extend {
		display: flex;
		justify-content: space-between;
		.image {
			margin-left: 20px;
			margin-right: 10px;
			image {
				width: 10px;
				height: 164px;
			}
		}
		.detail {
			position: relative;
			flex-grow: 1;
			.item {
				display: flex;
				align-items: center;
				padding: 0;
				height: 34px;
				.key {
					width: 60px;
					margin-right: 10px;
					text-align: right;
					font-size: 13px;
					color: #939393;
				}
			}
			.huiyuanxieyi {
				position: absolute;
				right: 0px;
				top: 15px;
				color: #A2A2A2;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
				z-index: 1;
				image {
					width: 26px;
					height: 26px;
				}
			}
		}
	}
	.youhuiInfo {
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 20px 0 10px 0;
		margin-right: 20px;
		text {
			font-size: 14px;
			color: #000;
		}
		.split {
			width: 2px;
			height: 12px;
			background-color: #C94637;
		}
		image {
			width: 30px;
			height: 30px;
		}
	}
}
.mdbz {
		display: flex;
		height: calc(100vh - 490px);
		// #ifdef H5
		height: calc(100vh - 490px - 44px);
		// #endif
		border-top: 1px solid #cfcfcf;
		border-bottom: 1px solid #cfcfcf;
		.left{
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 90px;
			margin-left: 20px;
			justify-content: center;
			image {
				width: 30px;
				height: 30px;
			}
			text {
				font-size: 12px;
				color: #A2A2A2;
			}
		}
		.right {
			height: 100%;
			.bzItem {
				display: flex;
				.icon {
					image {width: 14px; height: 14px; margin-right: 5px;}
				}
				.infos {
					.date,.detail {
						color: #959595;
						font-size: 13px;
						height: 20px;
						line-height: 20px;
					}
				}
			}
		}
	}
	.bottombtn {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 70px;
		display: flex;
		align-items: center;
		.submit-btn {
			margin: 0 auto;
		}
	}

  #hyxypopup {
    background: #fff;
    width: 300px;
    border-radius: 10px;
    height: 340px;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 170px);
    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      font-size: 15px;
    }
		.bottom {
			height: 46px;
			background: #eaebea;
			display: flex;
			align-items: center;
			border-radius: 0 0 10px 10px;
			button {
				background: #000;
				color: #fff;
				font-size: 13px;
				height: 30px;
				line-height: 30px;
			}
		}
    .c {
      padding: 10pt;
      font-size: 13px;
      box-sizing: border-box;
      height: calc(340px - 46px - 47px);
    }
  }
</style>